<template>
    <QilinTable :tableConfig.sync="tableConfig">
        <template v-slot:project="slotData">
            <div>{{slotData.data.scope.row.project.join("、")}}</div>
        </template>
    </QilinTable>
</template>

<script>
export default {
    data(){
        return {
            tableConfig:{ // 表格组件配置项
                elTableConfig:{
                    border:true,
                    stripe:true,
                    size:"small"
                },
                headerConfig:[
                    {
                        label:"序号",
                        type:"sortIndex",
                        width:60
                    },
                    {
                        label:"姓名",
                        prop:"name",
                        type:"text",
                        width:100
                    },
                    {
                        label:"年龄",
                        prop:"age",
                        type:"text",
                        width:80
                    },
                    {
                        label:"出生日期",
                        prop:"birthday",
                        type:"date",
                        format:"chinese",
                        width:120
                    },
                    {
                        label:"项目",
                        prop:"project",
                        type:"slot",
                        slotName:"project",
                        ellipsis:true,
                        width:120
                    },
                    {
                        label:"简介",
                        prop:"description",
                        type:"text",
                        ellipsis:true
                    },
                    {
                        label:"操作",
                        type:"operate",
                        fixed:"right",
                        width:250,
                        operateOptions:[
                            {
                                btnName:"查看",
                                btnType:"text",
                                btnSize:"small",
                                btnClick:(row,item)=>{
                                    console.log(row,item);
                                }
                            },
                            {
                                btnName:"删除",
                                btnType:"text",
                                btnSize:"small"
                            }
                        ]
                    }
                ],
                // 真实数据
                tableData:[{
                    name:"Qilin",
                    age:28,
                    birthday:"1996-05-12",
                    project:["U创办公管理系统","U创小程序"],
                    description:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~"
                }],
                // 表格分页配置项
                paginationsObj:{
                    currentPage:1, //当前页
                    pageSize:5, //当前每页数量
                    pageSizes:[5,10,15], //每页显示多少条选项集
                    total:0, //表格总数量
                    layout:"total,sizes,prev,pager,next,jumper"
                }
            }
        }
    },
    methods:{

    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>

</style>
